import React from "react";
import { useRequest } from "ahooks";

import { Skeleton } from "@/components/ui/skeleton";
import {
  VbpStatsI,
  VbpStatsByCadnI,
  VbpStatsByHisCodeI,
  VbpStatsByStatsDateI,
} from "../../types/api";
import {
  getVbpStatsByHisCode,
  getVbpStatsByCadn,
  getVbpStatsByCadnDept,
  getVbpStatsByStatsDate,
} from "../../api";
import request from "../../api/http_class";
import { dayjs } from "../../App";
import { useLocation, useNavigate } from "react-router-dom";
// import ChartByDept from "./components/chart_by_dept";
import BarChartByCadnGroup from "./components/bar_chart_by_cadn_group";
import BarChartByCadnGroupDept from "./components/bar_chart_by_cadn_group_dept";
import BarChartByHisCode from "./components/bar_chart_by_his_code";
import LineChartByStatsDate from "./components/line_chart_by_stats_date";
import { useToast } from "@/hooks/use-toast";
// import D3array from "./components/d3-array";

const dateFormat = "YYYY-MM-DD";

const VbpStats = (): JSX.Element => {
  const location = useLocation();
  const navigate = useNavigate();
  const [vbpStatsList, setVbpStatsList] = React.useState<VbpStatsByHisCodeI[]>(
    []
  );
  const [vbpStatsByCadnList, setVbpStatsByCadnList] = React.useState<
    VbpStatsByCadnI[]
  >([]);
  const [vbpStatsByDeptList, setVbpStatsByDeptList] = React.useState<
    VbpStatsByCadnI[]
  >([]);
  const [vbpStatsByStatsDateList, setVbpStatsByStatsDateList] = React.useState<
    VbpStatsByStatsDateI[]
  >([]);
  const [searchText, setSearchText] = React.useState("");
  const [showImportModal, setShowImportModal] = React.useState<boolean>(false);
  const [importing, setImporting] = React.useState<boolean>(false);
  const searchInput = React.useRef<any>(null);
  const { toast } = useToast();

  // 获取可视化数据，一次取全部
  const { loading: loadingChartData, run: runByHisCode } = useRequest(
    (paramsString: string) => getVbpStatsByHisCode(paramsString),
    {
      manual: false,
      defaultParams: [location.search.replace(/^\?/, "")],
      onSuccess(resp: any, params: any) {
        console.log(resp);
        setVbpStatsList(resp.data.data);
      },
      onError(e: any, params: any) {
        toast({
          variant: "destructive",
          title: "获取数据失败",
        });
      },
    }
  );

  const { run: runByCadn } = useRequest(
    (paramsString: string) => getVbpStatsByCadn(paramsString),
    {
      manual: false,
      defaultParams: [location.search.replace(/^\?/, "")],
      onSuccess(resp: any, params: any) {
        console.log(resp);
        setVbpStatsByCadnList(resp.data.data);
      },
      onError(e: any, params: any) {
        toast({
          variant: "destructive",
          title: "获取数据失败",
        });
      },
    }
  );

  const { run: runByDept } = useRequest(
    (paramsString: string) => getVbpStatsByCadnDept(paramsString),
    {
      manual: false,
      defaultParams: [location.search.replace(/^\?/, "")],
      onSuccess(resp: any, params: any) {
        console.log(resp);
        setVbpStatsByDeptList(resp.data.data);
      },
      onError(e: any, params: any) {
        toast({
          variant: "destructive",
          title: "获取数据失败",
        });
      },
    }
  );

  const { run: runByStatsDate } = useRequest(
    (paramsString: string) => getVbpStatsByStatsDate(paramsString),
    {
      manual: false,
      defaultParams: [location.search.replace(/^\?/, "")],
      onSuccess(resp: any, params: any) {
        console.log(resp);
        setVbpStatsByStatsDateList(resp.data.data);
      },
      onError(e: any, params: any) {
        // message.error("获取数据失败");
      },
    }
  );

  const handleSearchSubmit = (values: any) => {
    console.log(values);
    // const params = new URLSearchParams();
    const params = new URLSearchParams(location.search.replace(/^\?/, ""));
    params.set("dateRange", JSON.stringify(values.dateRange));

    navigate(`${location.pathname}?${params.toString()}`);
    runByStatsDate(params.toString());
  };

  return (
    <div className="w-full">
      <div className="w-full"></div>

      <div>
        <div id="chartContainer" className="w-full">
          <div className="text-center">
            <h3 className="text-2xl font-bold">中选品种完成情况</h3>
            {vbpStatsList.length > 0 ? (
              <BarChartByHisCode data={vbpStatsList} />
            ) : (
              <Skeleton className="w-[1024] h-[748] rounded-full" />
            )}
          </div>
          <div className="text-center">
            <h3 className="text-2xl font-bold">按药学分组统计</h3>
            <BarChartByCadnGroup data={vbpStatsByCadnList} />
          </div>
          <div className="text-center">
            <h3 className="text-2xl font-bold">科室集采药品完成情况统计</h3>
            <BarChartByCadnGroupDept data={vbpStatsByDeptList} />
          </div>
          <div className="text-center">
            <h3 className="text-2xl font-bold">集采相关药品使用过程</h3>
            <LineChartByStatsDate data={vbpStatsByStatsDateList} />
          </div>
        </div>
      </div>
    </div>
  );
};

export default VbpStats;
